<template>
    <div class="common-layout">
        <el-row>
            <el-select v-model="state.selected" class="m-2" placeholder="Select" 
            @change="change"
            size="large">
                <el-option v-for="item in state.options" :key="item" :label="item" :value="item">
                    {{ item }}
                </el-option>
            </el-select>

            <el-text> 数量：{{ state.stocks.length }} </el-text>
        </el-row>
        
        <el-row>
            <el-table :data="state.data" 
            :cell-class-name="tableColumnClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @header-click="tableHeaderClick"
            @cell-click="cellClick"
            style="width: 100%" height="800">
                <el-table-column prop="date" fixed label="Date" width="160" sortable>
                    <template #default="scope">
                        {{ scope.row.date }}  <el-tag  type="success">{{ state.stat[scope.row.date] ?? 0 }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column v-for="stock in state.stocks" width="160" :key="stock" :label="stock">
                    <template #default="scope">
                        <div v-if="scope.row[stock]">
                            <el-text class="mx-1" size="large">
                            {{ scope.row[stock].lp }}
                            </el-text>
                            <el-text class="mx-1" type="danger" v-if="scope.row[stock].monthPct >= 0" size="small">({{ scope.row[stock].monthPct }})</el-text>
                            <el-text class="mx-1" type="success" v-if="scope.row[stock].monthPct < 0" size="small">({{ scope.row[stock].monthPct }})</el-text>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>
  
<script setup lang="ts">
import { reactive } from 'vue'
import { getMonthLpNewHighDetail} from '../service/statistic'
import router, { openNewTableWeekDetail } from '../router'
import { getLpClassName} from '../utils/help'
import { type MonthLpNewHighDetail, builtData } from '../service/type'

const base = "MonthLpNewHighDetail"
const selectKey = base + "Select"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const state = reactive<MonthLpNewHighDetail>({
    selected: sessionStorage.getItem(selectKey) || "",
    rawData: [],
    data: [],
    stat: [],
    stocks: [],
    options: [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})

const change = () => {
    sessionStorage.setItem(selectKey, state.selected)
    loadData(state.selected)
}

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const loadData = (selected : string) => {
    getMonthLpNewHighDetail(selected).then(res => {
        builtData(state, res)
    })
}

        loadData(state.selected)

        const tableColumnClassName = ({row, column, rowIndex, columnIndex}) => {

            if (row['date'] == state.selected) {
                return 'lp-warning-row'
            }

            let cell = column.label
            let item = row[cell]
            if (item) {
                return getLpClassName(item.lp)
            }
        }

        const tableHeaderClick = (column, event) => {
            let stock = column.label
            openNewTableWeekDetail(stock)
        }

        const cellClick = (row, column, cell, event) => {
            let prop = column.property
            if (prop == 'date') {
                state.selected = row[prop]
                change()
            }
        }
</script>

<style scope>
.lp-warning-row {
    background: rgb(215, 246, 248);
}
</style>